import React, {Component} from 'react'

class LifeCycle2 extends Component {
    constructor(props) {
        console.log('01、构造函数');
        super(props);
        this.state = { 
            msg: '我是一个msg'
         };
    }

    /* componentWillMount = () => {
        console.log('02、组件将要挂载');
    } */

    componentDidMount = () => {
        console.log('04、组件已经挂载');
    }

    shouldComponentUpdate = (nextProps, nextState) => {
        console.log('01、组件是否需要更新');
        console.log(nextProps);
        console.log(nextState);
        return true ; 
    }

    /* componentWillUpdate = () => {
        console.log('02、组件将要更新');
    } */

    getSnapshotBeforeUpdate(prevProps, prevState){
        console.log("组件更新前： getSnapshotBeforeUpdate");
        return prevState
    }

    componentDidUpdate = () => {
        console.log('04、组件已经更新');

    }

    /* componentWillReceiveProps = () => {
        console.log('01、接收到父组件传值');

    } */

    static getDerivedStateFromProps(props, state){
        console.log("组件初始化：getDerivedStateFromProps： " + props )
        console.log(state)
        return state
    }
 
    componentDidCatch(error, info) {
        console.log("componentDidCatch: " + error + " " + info)
    }

    componentWillUnmount = () => {
        console.log('01、组件销毁');
    }

    setMsg = () =>{
        this.setState({
            msg: "我是改变后的msg数据"
        });
    }


    render() {
        console.log('03、组件渲染');
        return (
            <div>
                生命周期函数演示 --- {this.state.msg} {/* --- {this.props.title} */}
                <br/>
                <br/>
                <button onClick={this.setMsg}>更新msg的数据</button>
            </div>
        );
    }
}

export default LifeCycle2;